<template>
  <z-select
    v-model:value="value"
    style="width: 240px"
    :options="options"
    placeholder="不显示placeholder"
    @change="handleChange"
  />
  <br />
  <br />
  <z-select
    v-model:value="value1"
    style="width: 240px"
    :options="options"
    placeholder="显示placeholder"
    @change="handleChange"
  />
</template>
<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'SelectDemo1',
  setup() {
    const value = ref('')
    const value1 = ref(undefined)
    const options = ref([
      {
        value: 'jack',
        label: 'Jack',
      },
      {
        value: 'lucy',
        label: 'Lucy',
      },
      {
        value: 'tom',
        label: 'Tom',
      },
    ])

    const handleChange = (val, option) => {
      console.log(val, option)
    }

    return {
      value,
      value1,
      options,
      handleChange,
    }
  },
})
</script>
